<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../assets/font/iconfont.css">
    <style>
        body {
            padding-bottom: 800px;
            background-color: #f5f5f5;
        }

        .input-box {
            --h: 30px;
            width: 300px;
            height: var(--h);
            position: relative;
            border-bottom: 2px solid #aaa;
            margin-top: var(--h);
        }

        .input-box .placeholder {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            font-size: 18px;
            line-height: var(--h);
            color: #aaa;
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
            transform: translate(0, 0);
            transition: all 400ms ease;
        }

        .input-box .placeholder .iconfont {
            opacity: 0;
            cursor: pointer;
            transition: all 400ms ease;
        }

        .input-box input {
            width: 100%;
            height: 100%;
            border: none;
            outline: none;
            box-sizing: border-box;
            background-color: transparent;
            position: relative;
            font-size: 18px;
            letter-spacing: 4px;
        }

        .input-box .line {
            position: absolute;
            left: 0px;
            bottom: -2px;
            height: 0px;
            width: 0%;
            font-size: 0px;
            border: none;
            border-bottom: 2px solid #3599da;
            transition: all 400ms ease;
        }

        .active .placeholder {
            transform: translate(0, -80%);
            font-size: 14px;
            color: #3599da;
        }

        .active .placeholder .iconfont {
            opacity: 1;
            color: #aaa;
        }

        .active .line {
            width: 100%;
        }
    </style>
</head>

<body>
    <!-- ui组件的开发：以极小的使用代价换取标签美化 -->
    <div id="app">
        <p>username:{{ username }}</p>
        <p>password:{{ password }}</p>
        <div class="login-box">
            <h4>登录</h4>
            <div>
                <!-- <label for="">asda</label>
                <input type="text" v-model="username"> -->
                <!-- <my-input label="登录名" type="text" :value="username" @update:value=" username=$event "></my-input> -->
                <!-- 
                    v-model 在组件标签上定义使用时其实就是 v-bind 和 v-on 绑定语法糖，同时完成绑定的特殊处理
                        1. v-model 分解的v-bind 绑定 modelValue 属性  ==>  v-bind:model-value
                        2. v-model 分解的v-on 绑定 update:model-value 事件  ==> v-on:update:model-value
                 -->
                <my-input label="登录名" type="text" v-model="username"></my-input>

            </div>
            <div>
                <!-- <input type="password"> -->
                <!-- <my-input label="登录密码" type="password" :show-password="true"></my-input> -->
                <!-- show-password 为自定义的组件boolean类型属性 -->
                <!-- <my-input label="登录密码" type="password" show-password :value="password"  @update:value=" password=$event "></my-input> -->
                <my-input label="登录密码" type="password" show-password v-model="password"></my-input>
                
            </div>
            <div>
                <br><br>
                <input type="button" value="登录" @click="doLogin()">
            </div>
        </div>
    </div>

    <script type="text/x-template" id="myInput">
        <!-- <div class="input-box" :class=" { active:isFocus||value!='' } "> -->
        <div class="input-box" :class=" { active:isFocus||modelValue!='' } ">
            <div class="placeholder">
                <span>{{ label }}</span>
                <span v-if="showPassword" class="iconfont icon-eye" @click=" type=(type=='text'?'password':'text') "></span>
            </div>
            <input v-bind:type="type" @blur="isFocus=false" @focus="isFocus=true" v-model="cvalue">
            <div class="line"></div>
        </div>
    </script>

    <script type="module">
        import { createApp } from "../../assets/vue3/vue.esm-browser.js";
        const app = createApp({
            data() {
                return {
                    username:"admin",
                    password:"123456"
                }
            },
            methods: {
                doLogin() {
                    console.log(this.username,this.password)
                }
            },
        });

        app.component("MyInput", {
            template: "#myInput",
            // emits:["update:value"],
            emits:["update:modelValue"],
            data() {
                return {
                    isFocus: false,
                    type:"text"
                }
            },
            props:{
                label:{
                    default:"标题",
                    type:String
                },
                showPassword:{
                    type:Boolean,
                    default:false
                },
                // value:{
                //     type:String,
                //     default:""
                // }
                modelValue:{
                    type:String,
                    default:""
                }
            },
            computed: {
                cvalue:{
                    get(){
                        // return this.value;
                        return this.modelValue;
                    },
                    set(nv){
                        // this.$emit("update:value",nv)
                        this.$emit("update:modelValue",nv)
                    }
                }
            },
            created () {
                // 提供默认值
                this.type = this.$attrs.type;
            },
        })

        app.mount("#app")
    </script>
</body>

</html>